<template>
  <div class="popup" v-show="isShow">
    <div class="popup_main">
      <div class="title">
        <span>按行政区划选择</span>
      </div>
      <div class="content">
          <div style="height: 89px;position: relative;overflow-y: auto;background: #F5F8FA;margin: 8px;" class="webkitScrollbar">
            <span style="font-size: 12px;margin-left: 8px;display: block;">当前选择的城市：</span>
            <el-space wrap style="padding:0px 8px 8px;">
              <el-tag v-for="(tag,index) in regionList" :key="index" closable type="primary" @close="handleClose(index)" size="small">
                {{ tag.city||tag.province }}
              </el-tag>
            </el-space>
          </div>
        <div class="sel-city-searchbar">
          <div class="btnbar">
            <span :class="index==1?'btnActive':''">按省份</span>
            <span :class="index==2?'btnActive':''"  style="margin-left: 0px;">按市</span>
          </div>
          
        </div>
        <div class="sel-city-hotcity">
          <template v-if="index == 1">
            <span v-for="item in [{ name: '全国', city: '' }]" class="cityItem"
              @click="handleAllProvince(item.name,item)">{{ item.name}}</span>
          </template>
        <div id="selCityPlaceListId" ref="selCityPlaceListRef">
          <div v-for="item in provinceList" :key="item.code" class="selCityPlaceDiv" :id="item.code">
            <div class="item_title">
                <div>
                  <span class="province" @click="handleProvince(item.name,item.code)">{{ item.simplifyName }}:</span>
                  <div class="label_title">
                  <span v-for="city in item.list" @click="handleCity(item.name, city)">{{
                    city.name
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
        <el-button size="small" type="primary" @click="handleQuery" class="queryBtn">确认</el-button>
      </div>
      <el-icon class="close">
        <Close @click="close" />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getUserProfile } from '@/api/system/user/profile'
import { useProvinceStore } from '@/store/modules/province'
const provinceStore = useProvinceStore()
const provinceList = ref<any>([])
const getList = async (code)=>{ // 获取省市数据
  await provinceStore.fetchProvinceData()
  if(code=='root'){
    provinceList.value = provinceStore.provinceDate
    return
  }
  provinceList.value = provinceStore.provinceDate.filter(item=>item.code==code)
};
const handleClose = (index) => {
  regionList.value.splice(index, 1)
}
const emit = defineEmits(['querySelect'])
const props = defineProps({
  regionLists: Array,
  deptName:String
})
const message = useMessage()
const regionList = ref(props.regionLists)
watch(
  () => props.regionLists,
  (newValue) => {
    regionList.value = newValue;
  }, { deep: true }
)
const isShow = ref(false)
const divisionCode = ref({})
const radio = ref('按省份')
const index = ref(1) // 省市切换
const open = async() => {
  isShow.value = true;
  const res = await getUserProfile()
  divisionCode.value = res.divisionCode;
  radio.value = res.divisionCode=='root'?'按省份':'按市'
  index.value = divisionCode.value=='root'?1:2
  await getList(divisionCode.value)
}
const changeRadio = (val)=>{
  return;
}
const close = () => {
  isShow.value = false;
  regionList.value = []
  emit('querySelect', regionList.value)
}
const selCityPlaceListRef = ref(null);
defineExpose({ open, close }) // 提供 open 方法，用于打开弹窗
const handleProvince = (simplifyName,code) => {
  
  if(regionList.value&&regionList.value[0]?.province=='全国') regionList.value=[]
  regionList.value.push({province:simplifyName,code:code})
  let newArr = regionList.value.filter(item=>(item.province!= simplifyName));
  if(newArr.length>0){
    nextTick(()=>{
      regionList.value = [...newArr,{province:simplifyName,code:code}]
    })
  }else if(newArr.length==0){
    nextTick(()=>{
      regionList.value = [{province:simplifyName,code:code}]
    })
  }
}
const handleCity = (simplifyName, city) => {
  if(regionList.value&&regionList.value[0]?.province=='全国') regionList.value=[]
  let newArr = { province: simplifyName, city: city.name,code:city.code }
  let index2 = regionList.value.findIndex(item => (item.province == simplifyName) && (item.city == city.name))
  if (index2 == -1) { regionList.value.push(newArr) }
  let provinceIndex = regionList.value.findIndex(item => (item.province == simplifyName) && (!item.city))
  if (provinceIndex != -1) regionList.value.splice(provinceIndex, 1)
}
const handleAllProvince = (name) => {
  regionList.value = [{province:name}]
}
const nowCity = (list) => {
  if(list.length==0){
    return '';
  }else{
    let city = []
    list.forEach(item => {
      if (item.city) {
        city.push(item.city)
      } else {
        city.push(item.province)
      }
    })
    return city
  }
}
const handleQuery = () => {
  if (!regionList.value.length) {
    message.warning('请选择行政区划')
    return
  }
  isShow.value = false;
  emit('querySelect', regionList.value)
}
</script>

<style lang="scss" scoped>
.popup {
  position: absolute;
  width: 326px;
  display: block;
  height: 435px;
  left: 140px;
  top: 35px;

  .popup_main {
    z-index: 2;
    position: absolute;
    width: 326px;
    height: 435px;
    background: #fff;
    overflow: hidden;
    border: 1px solid #E5E6EB;

    .title {
      border-bottom: 1px solid #E5E6EB;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      color: #4c4c4c;
      padding-left: 8px;
      display: flex;
      flex-direction: row;

      .nowCity {
        display: inline-block;
        width: 230px;
        white-space: nowrap;
        /* 确保文本在一行内显示 */
        overflow: hidden;
        /* 隐藏溢出的内容 */
        text-overflow: ellipsis;
        /* 显示省略号 */

      }
    }

    .close {
      position: absolute;
      z-index: 50;
      top: 7px;
      right: 6px;
      width: 12px;
      height: 12px;
      border: 0;
      cursor: pointer;
      padding: 0;
    }
  }
}
#selCityPlaceListId::-webkit-scrollbar,.webkitScrollbar::-webkit-scrollbar{
  width: 5px; /* 滚动条宽度 */
}
/* 滚动条滑块部分 */
#selCityPlaceListId::-webkit-scrollbar-thumb,.webkitScrollbar::-webkit-scrollbar-thumb {
  background-color: #D7DBDE; /* 滑块颜色 */
  border-radius: 5px; /* 滑块圆角 */
}
  /* 滚动条轨道部分 */
#selCityPlaceListId::-webkit-scrollbar-track,.webkitScrollbar::-webkit-scrollbar-track{
  background-color: #fff; /* 轨道颜色 */
  border-radius: 2px; /* 轨道圆角 */
}

.popup .content {
  height: 409px;
  overflow: hidden;
  .sel-city-hotcity {
    margin: 0 8px;
    border: 1px solid #E5E6EB;
    box-sizing: border-box;

    .cityItem {
      margin-left: 15px;
      display: inline-block;
      white-space: nowrap;
      margin-right: 5px;
      line-height: 16px;
      color: #3d6dcc;
      font-size: 12px;
      cursor: pointer;
      font-weight: 700;
    }
  }

  .sel-city-searchbar {
    display: flex;
    align-items: center;
    margin:0px 8px 8px;
    justify-content: space-between;
    span{
      display: inline-block;
      width: 50px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      color:rgba(0, 0, 0, 0.85);
      border: 1px solid #D9D9D9;
      font-size: 12px;
    }
    .btnActive{
      border: 1px solid #3560F6;
      color: #3560F6;
    }
    .sel-city-searchinput {
      border: 1px solid #ccc;
      height: 20px;
      float: left;
      line-height: 20px;
      text-indent: 4px;
    }
  }

  .sel-city-letterbar {
    margin: 0 11px 10px;

    .cityItem {
      display: inline-block;
      white-space: nowrap;
      margin-right: 9px;
      line-height: 18px;
      color: #3d6dcc;
      font-size: 12px;
      cursor: pointer;
    }
  }

  #selCityPlaceListId {
    height: 180px;
    overflow-y: auto;
    overflow-x: hidden;

    .selCityPlaceDiv {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;

      .letter {
        width: 8%;
        font-size: 24px;
        line-height: 24px;
        font-weight: 700;
        color: #ccc;
        padding: 0;
        margin: 0;
        cursor: pointer;
      }

      .item_title {
        padding-left: 15px;
        width: 100%;
        font-size: 12px;

        >div {
          display: flex;
          flex-direction: row;

          .province {
            margin-right: 5px;
            width: 50px;
            color: #3d6dcc;
            font-weight: 700;
            cursor: pointer;
          }
          .label_title {
            flex: 1;
            flex-wrap: nowrap;

            span {
              display: inline-block;
              white-space: nowrap;
              margin-right: 9px;
              line-height: 18px;
              color: #3d6dcc;
              cursor: pointer;
            }
          }
        }


      }
    }
  }
}
.queryBtn {
      margin: 10px 8px;
      float: right;
      cursor: pointer;
    }
</style>